.sidebar-menu {
	background-color: $sidebarBackground;
	display: none;
	height: 100%;
	min-width: $sidebarWidth;
	width: $sidebarWidth;
	transition: all .6s;

	&.show {
		display: block;
	}

	&:before {
		background-color: #373330;
		bottom: 0;
		content: '';
		left: 0;
		position: fixed;
		top: 0;
		width: $sidebarWidth;
		z-index: 699;
	}

	@media (min-width: $mobileScreenStart) {
		display: block;
		position: fixed;
	}

	.logo {
		background-color: $sidebarDarker;
		border-bottom: 1px solid $black;
		display: block;
		margin: auto;
		padding: 10px;
		position: relative;
		text-align: center;
		width: 100%;
		z-index: 705;

		img {
			width: 100%;
		}
	}

	&-item {
		> a {
			color: $white;
			cursor: pointer;
			display: block;
			padding: 0.5rem 0;
			position: relative;
			text-align: center;
			text-decoration: none;
			transition: .4s;
			width: 100%;
			z-index: 705;

			&:hover,
			&:focus,
			&.active {
				background-color: $sidebarLinkHoverActive;
			}

			.holder {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: center;

				div {
					width: 100%;
				}
			}
		}

		&:first-of-type {
			a {
				padding: 1rem 0 0.5rem 0;
			}
		}

		&:last-of-type {
			a {
				margin-bottom: 0;
			}
		}

		&-title {
			margin-top: 5px;
		}
	}

	&-wrapper {
		height: calc(100% - 90px);
		overflow-y: auto;
	}

	&-submenu {
		height: 100%;
		left: -100%;
		overflow-y: auto;
		position: fixed;
		top: 0;
		transition: .8s;
		width: calc(100% - 90px);
		z-index: 1;

		&.show {
			left: $sidebarWidth !important;
		}

		@media (min-width: $mobileScreenStart) {
			&.small {
				left: -400px;
				width: 400px;
			}
			&.medium {
				left: -600px;
				width: 600px;
			}
			&.half-screen {
				left: -50%;
				width: 50%;
			}
			&.full-screen {
				left: -100%;
				width: calc(100% - 90px);
			}
		}

		&-wrapper {
			background: $sidebarSubMenuBackgorund;
			padding: 20px;
		}

		&-header {
			align-items: center;
			border-bottom: 1px solid rgba(224, 224, 224, .3);
			display: flex;
			justify-content: space-between;
			padding: 0.75rem 0;

			h4 {
				color: #fff;
				display: block;
				font-size: 1.5rem;
				font-weight: 600;
				margin: 0;

				@media(min-width: $mobileScreenStart){
					font-size: 2.2rem;
				}
			}

			.close {
				background-color: transparent;
				border: none;
				height: 25px;
				opacity: 0.3;
				outline: none;
				position: relative;
				transition: .4s;
				width: 25px;

				&:hover {
					opacity: 1;
				}

				&:before,
				&:after {
					background-color: #fff;
					content: ' ';
					height: 25px;
					left: 50%;
					position: absolute;
					top: 50%;
					width: 2px;
				}

				&:before {
					transform: translate(-50%, -50%) rotate(45deg);
				}

				&:after {
					transform: translate(-50%, -50%) rotate(-45deg);
				}
			}
		}

		&-body {
			h2 {
				margin: 25px 0 0 0;
				color: #98918c;
				font-size: 1rem;

				@media(min-width: $mobileScreenStart){
					font-size: 1.5rem;
				}
			}
			a {
				color: $white;
				text-decoration: none;
				transition: .4s;
				opacity: .8;

				&:hover,
				&:focus,
				&.active{
					opacity: 1;
				}
			}
		}
	}
}